<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>

</head>

<body>
    <!-- 
        v-model:只能用于表单元素，输入元素

     -->
    <div id="root">
        <h1>你好，{{name}}</h1>
        单向绑定：<input type="text" :value="name"> <br>
        双向绑定：<input type=" text" v-model:value="name">
        <hr>
    </div>
    <script>
        Vue.config.productionTip = false

        //创建vue实例
        const x = new Vue({
            el: '#root', //用于指定当前容器实例，通常为id选择器
            // data: {
            //     name: '小明'
            // }
            //data 的第二种方式
            data: function () {
                console.log('@@@', this)// 此处的天使vue对象
                return {
                    name: "小红"
                }
            }

        })

        // el第二种写法
        // setTimeout(() => {
        //     v.$mount('#root')
        // }, 1000);


        let number = 19
        let per = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(per, 'age', {
            // value: 18,
            // enumerable: true,//控制是否可以枚举
            // writable: true,//控制是否可以被重写
            // configurable: true,//控制是否被删除
            //有人读取 per 的age属性的时候，get函数会被调用，且返回值就是age的值
            get() {
                return number
            },

            //当有人修改age时候，会调用set，且会受到age属性
            set(value) {
                console.log('有人修改了age的属性值，且值为：', value)
                number = value
            }
        })
    </script>
</body>

</html>